<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阵营匹配工具 - 复仇者逻辑版</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            width: 100%;
            max-width: 600px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            padding: 25px;
            margin-top: 20px;
        }
        
        h1 {
            text-align: center;
            color: white;
            font-size: 28px;
            margin-bottom: 15px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        h2 {
            text-align: center;
            color: #1a2a6c;
            margin-bottom: 20px;
            font-size: 22px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }
        
        .role {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 12px 15px;
            background: #f8f9fa;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .role-name {
            font-weight: bold;
            color: #444;
            width: 100px;
            font-size: 16px;
        }
        
        select {
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #ddd;
            background: white;
            flex-grow: 1;
            font-size: 16px;
            color: #444;
            margin-left: 10px;
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
        
        .result-title {
            text-align: center;
            color: #1a2a6c;
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 10px;
            border-bottom: 1px solid #eee;
            font-size: 16px;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .revenge {
            color: #d9534f;
            font-weight: bold;
        }
        
        .instructions {
            color: white;
            text-align: center;
            max-width: 600px;
            margin-top: 20px;
            font-size: 14px;
            opacity: 0.9;
            line-height: 1.6;
        }
        
        .logic-info {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: white;
            font-size: 14px;
        }
        
        .logic-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #ffdd00;
        }
        
        .revenge-relations {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .relation {
            background: rgba(0, 0, 0, 0.2);
            padding: 8px;
            border-radius: 6px;
            font-size: 13px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>阵营匹配工具</h1>
    
    <div class="container">
        <h2>选择初始阵营</h2>
        
        <div class="role">
            <div class="role-name">周曼君:</div>
            <select id="zhou">
                <option value="直系">直系</option>
                <option value="护法">护法</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">林墨:</div>
            <select id="lin">
                <option value="奉系">奉系</option>
                <option value="护法">护法</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">顾奕:</div>
            <select id="gu">
                <option value="直系">直系</option>
                <option value="皖系">皖系</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">袁梦妍:</div>
            <select id="yuan">
                <option value="奉系">奉系</option>
                <option value="皖系">皖系</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">张既白:</div>
            <select id="zhang">
                <option value="皖系">皖系</option>
                <option value="护法">护法</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">苏凤至:</div>
            <select id="su">
                <option value="直系">直系</option>
                <option value="奉系">奉系</option>
            </select>
        </div>
        
        <div class="role">
            <div class="role-name">卫铮:</div>
            <select id="wei">
                <option value="直系">直系</option>
                <option value="皖系">皖系</option>
                <option value="奉系">奉系</option>
                <option value="护法">护法</option>
            </select>
        </div>
        
        <div class="result">
            <div class="result-title">最终阵营结果</div>
            <div id="results">
                <!-- 结果将在这里显示 -->
            </div>
        </div>
    </div>
    
    <div class="instructions">
        <p>根据选择自动计算最终阵营，当角色与其复仇对象处于同一阵营时会变为"复仇者"</p>
    </div>
    
    <div class="logic-info">
        <div class="logic-title">复仇关系:</div>
        <div class="revenge-relations">
            <div class="relation">林墨 → 周曼君</div>
            <div class="relation">周曼君 → 张既白</div>
            <div class="relation">张既白 → 顾奕</div>
            <div class="relation">顾奕 → 苏凤至</div>
            <div class="relation">苏凤至 → 袁梦妍</div>
            <div class="relation">袁梦妍 → 林墨</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有下拉框
            const selects = document.querySelectorAll('select');
            
            // 为每个下拉框添加事件监听器
            selects.forEach(select => {
                select.addEventListener('change', calculateResults);
            });
            
            // 初始计算一次
            calculateResults();
            
            function calculateResults() {
                // 获取当前选择
                const zhou = document.getElementById('zhou').value;
                const lin = document.getElementById('lin').value;
                const gu = document.getElementById('gu').value;
                const yuan = document.getElementById('yuan').value;
                const zhang = document.getElementById('zhang').value;
                const su = document.getElementById('su').value;
                const wei = document.getElementById('wei').value;
                
                // 定义复仇对象关系
                const revengeTargets = {
                    '林墨': '周曼君',
                    '周曼君': '张既白',
                    '张既白': '顾奕',
                    '顾奕': '苏凤至',
                    '苏凤至': '袁梦妍',
                    '袁梦妍': '林墨'
                };
                
                // 获取每个角色的初始阵营
                const initialFactions = {
                    '周曼君': zhou,
                    '林墨': lin,
                    '顾奕': gu,
                    '袁梦妍': yuan,
                    '张既白': zhang,
                    '苏凤至': su,
                    '卫铮': wei
                };
                
                // 第一步：应用逻辑2，确定临时阵营
                const tempFactions = {...initialFactions};
                
                for (const [character, target] of Object.entries(revengeTargets)) {
                    if (initialFactions[character] === initialFactions[target]) {
                        tempFactions[character] = '复仇者';
                    }
                }
                
                // 第二步：应用逻辑3，解决冲突
                const finalFactions = {...tempFactions};
                
                // 检查每个角色是否需要回退
                for (const [character, target] of Object.entries(revengeTargets)) {
                    // 如果当前角色是复仇者，且其复仇对象也是复仇者
                    if (tempFactions[character] === '复仇者' && tempFactions[target] === '复仇者') {
                        // 并且他们的初始阵营相同
                        if (initialFactions[character] === initialFactions[target]) {
                            // 回退到初始阵营
                            finalFactions[character] = initialFactions[character];
                        }
                    }
                }
                
                // 显示结果
                const resultsDiv = document.getElementById('results');
                resultsDiv.innerHTML = `
                    <div class="result-item"><span>周曼君:</span> <span class="${finalFactions['周曼君'] === '复仇者' ? 'revenge' : ''}">${finalFactions['周曼君']}</span></div>
                    <div class="result-item"><span>林墨:</span> <span class="${finalFactions['林墨'] === '复仇者' ? 'revenge' : ''}">${finalFactions['林墨']}</span></div>
                    <div class="result-item"><span>顾奕:</span> <span class="${finalFactions['顾奕'] === '复仇者' ? 'revenge' : ''}">${finalFactions['顾奕']}</span></div>
                    <div class="result-item"><span>袁梦妍:</span> <span class="${finalFactions['袁梦妍'] === '复仇者' ? 'revenge' : ''}">${finalFactions['袁梦妍']}</span></div>
                    <div class="result-item"><span>张既白:</span> <span class="${finalFactions['张既白'] === '复仇者' ? 'revenge' : ''}">${finalFactions['张既白']}</span></div>
                    <div class="result-item"><span>苏凤至:</span> <span class="${finalFactions['苏凤至'] === '复仇者' ? 'revenge' : ''}">${finalFactions['苏凤至']}</span></div>
                    <div class="result-item"><span>卫铮:</span> <span>${finalFactions['卫铮']}</span></div>
                `;
            }
        });
    </script>
</body>
</html>